<template>
  <div>
    <div style="margin-top: 15px; margin-bottom: 20px">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form :inline="true" class="demo-form-inline" align="left">
            <el-form-item>
              <el-input v-model="obj.id" placeholder="根据id查询" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="obj.name" placeholder="根据名称查询" />
            </el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="search"
            ></el-button>
            <el-button type="success" @click="add">添加</el-button>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table :data="tableData" style="width: 100%" max-height="100%">
      <el-table-column fixed prop="id" label="id" width="150">
      </el-table-column>
      <el-table-column prop="name" label="角色名称" width="120">
      </el-table-column>
      <el-table-column prop="description" label="角色描述" width="220">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="50"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="editRow(scope)"
            type="primary"
            size="small"
          >
            修改
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope)"
            type="danger"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加和修改公用的弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      width="35%"
      center
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="角色名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="form.description"
            type="textarea"
            :row="3"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            style="display: block; margin-top: 9px"
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="激活"
            inactive-text="禁用"
            active-value="Y"
            inactive-value="N"
          >
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 引入分页组件 -->
    <Pagenation
      style="margin-top: 20px"
      :total="pageInfo.total"
      :pageSize="pageInfo.pageSize"
      @changeSize="changeSize"
      @changePage="changePage"
    />
  </div>
</template>

<script>
import Pagenation from "../../components/pagenation/index.vue";
export default {
  data() {
    return {
      obj: {
        id: "",
        name: "",
      },
      title: "",
      tableData: [],
      centerDialogVisible: false,
      //添加和修改存放数据的地方
      form: {
        id: 0,
        name: "",
        description: "",
        status: "Y",
      },
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  components: { Pagenation },
  //生命周期的钩子函数，通常调用方法，来获取后台的数据
  created() {
    //在页面打开的时候，直接去调用方法，来获取页面初始列表数据
    this.iniPageData();
  },
  methods: {
    iniPageData() {
      this.$axios
        .post(
          "/rbacRole/" +
            this.pageInfo.currentPage +
            "/" +
            this.pageInfo.pageSize
        )
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data.list;
          //重新赋值分页信息
          (this.pageInfo.currentPage = res.data.data.pageNum),
            (this.pageInfo.pageSize = res.data.data.pageSize),
            (this.pageInfo.total = res.data.data.total);
        })
        .catch();
    },
    deleteRow(scope) {
      console.log(scope.row);
      this.$axios
        .delete("/rbacRole/" + scope.row.id)
        .then((res) => {
          if (res.data.code == 200) {
            this.$notify({
              title: "成功",
              message: res.data.msg,
              type: "success",
            });
            this.iniPageData();
          } else {
            this.$notify.error({
              title: "错误",
              message: "这是一条错误的提示消息",
            });
          }
        })
        .catch((err) => {
          //浏览器请求报错，后台响应状态码是200以外的
        });
      // rows.splice(index, 1);
    },
    //添加 并弹窗，同时还要赋值
    add() {
      this.title = "添加";
      //清空上次提交的数据
      this.form.id = 0;
      this.form.name = "";
      this.form.description = "";
      //显示弹窗
      this.centerDialogVisible = true;
    },
    //添加点击保存按钮后 发送请求到后台
    onSubmit() {
      //保存的时候 如何判断是添加还是修改？
      if (this.title == "添加") {
        this.$axios
          .post("/rbacRole/", this.form)
          .then((res) => {
            console.log(res);
            if (res.data.code == 500) {
              this.$message.error(res.data.msg);
            } else {
              this.$message({
                message: res.data.msg,
                type: "success",
              });
              this.iniPageData(); //重新初始化表单数据
              this.centerDialogVisible = false; //要隐藏弹窗
            }
          })
          .catch();
      } else {
        this.$axios
          .put("/rbacRole/", this.form)
          .then((res) => {
            if (res.data.code == 500) {
              this.$message.error(res.data.msg);
            } else {
              this.$message({
                message: res.data.msg,
                type: "success",
              });
              this.iniPageData(); //重新初始化表单数据
              this.centerDialogVisible = false; //要隐藏弹窗
            }
          })
          .catch();
      }
    },
    editRow(scope) {
      this.title = "修改";
      let rows = scope.row;
      this.form.id = rows.id;
      this.form.name = rows.name;
      this.form.description = rows.description;
      this.form.status = rows.status;
      //让弹窗显示
      this.centerDialogVisible = true;
    },
    search() {
      this.$axios
        .post(
          "/rbacRole/" +
            this.pageInfo.currentPage +
            "/" +
            this.pageInfo.pageSize,this.obj
        )
        .then((res) => {
          console.log(res);

          this.tableData = res.data.data.list;
          this.pageInfo.pageNum = res.data.data.pageNum;
          this.pageInfo.pageSize = res.data.data.pageSize;
          this.pageInfo.total = res.data.data.total;
        })
        .catch();
    }, //交换每页显示多少条
    changeSize(val) {
      this.pageInfo.pageSize = val;
      this.iniPageData();
    },
    //交换当前页码
    changePage(val) {
      this.pageInfo.currentPage = val;
      this.iniPageData();
    },
  },
};
</script>